<template>
    <el-form-item label="" prop="title">
        <div class="flexbox flexcenter">
            <el-popover placement="bottom" width="460" trigger="click">
                <div class="yusuan_num">标题组：{{createform.creattitle_list.length}} /10</div>
                <div class="yusuan_list">
                    <div class="yusuan_item flexbox flexcenter flexbetween" @click="seletCreattitle(item,index)" :class="{'active':index==createform.creattitle_active}" v-for="(item,index) in createform.creattitle_list" :key="index">
                        <img src="../../../assets/img/market_checked.svg" alt="" class="ys_check">
                        <el-input v-model="item.model_name" placeholder="请输入内容" size="small" class="ys_input" @input="changePlanKey(7,item.model_name)"></el-input>
                        <div class="yusuan_edit flexbox flexcenter">
                            <el-tooltip content="存为模板" placement="top">
                                <span class="icon_btn" @click.stop="saveModel(item,index,4)"><img src="../../../assets/img/ys_icon1.svg" alt=""></span>
                            </el-tooltip>
                            <el-tooltip content="删除" placement="top">
                                <span class="icon_btn" @click.stop="deletCreattitleModel(index)"><img src="../../../assets/img/ys_icon2.svg" alt=""></span>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <div class="yusuan_btn flexbox flexbetween">
                    <el-button size="mini" style="width:222px" @click="addCreattitleModel">添加标题组</el-button>
                    <el-button size="mini" style="width:222px" @click="creattitleModel">选择模板</el-button>
                </div>
                <div slot="reference" class="select_box flexbox flexcenter flexbetween">
                    <span class="select_text">{{createform.creattitle.model_name}}</span>
                    <span class="el-icon-caret-bottom"></span>
                </div>
            </el-popover>
            <div class="yusuan_num" style="font-size:14px;margin-left:16px">标题组：{{createform.creattitle_list.length}} /10</div>
        </div>
    </el-form-item>
</template>

<script>
export default {
    props: ["createform"],
    name: "",
    data() {
        return {};
    },
    created() {},
    methods: {
        sessionSave() {
            this.$emit("sessionSave");
        },

        changePlanKey(index, name) {
            this.$emit("changePlanKey", index, name);
        },

        saveModel(item, index, type) {
            this.$emit("saveModel", item, index, type);
        },

        // 选择创意标题模板
        seletCreattitle(val, index) {
            let that = this;
            let list = that.createform;
            if (list.creattitle_list.length == 1) {
                list.creattitle_active = index;
                list.creattitle = val;
            } else {
                this.creattitleCheck(list.creattitle_active, function () {
                    list.creattitle_list[list.creattitle_active] =
                        list.creattitle;
                    list.creattitle_active = index;
                    list.creattitle = val;
                    that.changePlanKey(7, val.model_name);
                });
            }
            this.sessionSave();
        },

        // 添加创意标题模板
        addCreattitleModel() {
            let that = this;
            let list = that.createform;
            if (list.creattitle_list.length > 9) {
                return;
            } else {
                this.creattitleCheck(list.creattitle_active, function () {
                    let creattitle = {
                        model_name:
                            "标题组" + (list.creattitle_list.length + 1),
                        title: [
                            {
                                title: "",
                                dynamic_words: [],
                            },
                        ],
                    };
                    list.creattitle_list.push(creattitle);
                    list.creattitle_active = list.creattitle_list.length - 1;
                    list.creattitle =
                        list.creattitle_list[list.creattitle_active];
                });
            }
            this.sessionSave();
        },

        //删除制作创意模板
        deletCreattitleModel(index) {
            let list = this.createform;
            if (this.createform.creattitle_list.length == 1) {
                return;
            } else {
                list.creattitle_list.splice(index, 1);
                list.creattitle_active = 0;
                list.creattitle = list.creattitle_list[0];
            }
            this.sessionSave();
        },

        // 添加创意标题模板
        creattitleModel() {
            const attr = {
                dialogVsb: true,
            };
            this.$bus.emit("creattitleModel", attr);
        },

        // 创意标题校验
        creattitleCheck(index, callback) {
            let list = this.createform.creattitle_list;

            for (let i in list[index].title) {
                if (!list[index].title[i].title) {
                    this.$message.error("请输入创意标题！");
                    return;
                }
            }
            callback();
        },

        sessionSave() {
            this.$emit("sessionSave");
        },
    },
    components: {},
};
</script>


<style scoped>
</style>

